import React, { useEffect, useState } from 'react'
import { CapsuleTabs } from 'antd-mobile'
import axios from './api/index'
import { ProductCard, Tag, Button } from 'react-vant';
import { Calendar, Cell } from 'react-vant'
function App() {
  const [list, setList] = useState([])
  const [list1, setList1] = useState([])
  const getdata = async () => {
    const res = await axios.get('/list')
    console.log(res);
    setList(res.data.data.data)
    const resp = await axios.get('/room/list')
    console.log(resp);
    setList1(resp.data.data.list)
  }
  useEffect(() => {
    getdata()
  }, [])
  return (
    <div>
      <CapsuleTabs>
        <CapsuleTabs.Tab title='直达' key='fruits'>
          {
            list?.map((v, i) => {
              return <ProductCard
                key={i}
                num={v.id}
                price={v.shopScore}
                desc={v.shopDescription}
                title={v.shopName}
                thumb={v.shopImage}
              />
            })
          }
        </CapsuleTabs.Tab>
        <CapsuleTabs.Tab title='机票' key='vegetables'>
          {
            list1?.map((v, i) => {
              return <ProductCard
                key={i}
                num={v.id}
                price={v.price}
                desc={v.title}
                title={v.name}
                thumb={v.url}
              />
            })
          }
        </CapsuleTabs.Tab>
        <CapsuleTabs.Tab title='汽车票' key='animals'>
          <Calendar>
            {(val, actions) => (
              <Cell
                isLink
                title='单个日期'
                value={val ? val.toLocaleDateString() : '请选择日期'}
                onClick={() => actions.open()}
              />
            )}
          </Calendar>
        </CapsuleTabs.Tab>
      </CapsuleTabs>
    </div>
  )
}

export default App